<template>
  <view class="login_box">
    <view class="login_content">
      <text class="login_title">软星工坊</text>
      <view class="login_enroll" @click="toLogin">
        登录/注册
      </view>
      <button open-type="getUserProfile"></button>
      <view class="login_body">
        <text class="login_subheading"> 加入·工坊 </text>
        <view class="login_agreement">
          <view :class="[choose ? 'login_choose choose_agreement' : 'login_choose']" @click="choose = !choose"></view>
          <view>我已阅读<text class="agreement" @click="agreement">《隐私协议》</text>和<text class="agreement"
              @click="provisions">《服务条款》</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<!-- 登录组件 -->
<script lang="ts" setup>
import { ref, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onBeforeUnmount } from "vue"
import { reqGetUserLogin } from '@/api/user-api';
import { useUserStore } from "@/pinia/user";
import { $showMsg } from "@/config/methods/index";



//是否同意协议
const choose = ref<boolean>(false);

//全局状态
const userInfoStore = useUserStore();

//用户隐私协议
const provisions = () => {
  uni.navigateTo({
    url: '/subpkg/provisions/provisions',
  })
}

//用户服务条款
const agreement = () => {
  uni.navigateTo({
    url: '/subpkg/agreement/agreement',
  })
}

//登录
const toLogin = () => {
  uni.login({
    success: (result) => {
      uni.showLoading({
        title: '登录中...', // 加载提示文字
        mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
      });

      // reqGetUserLogin(result.code).then((res) => {
      //   res.code === 200 ? userInfoStore.userInfo = res.data.userInfo : '';
      //   $showMsg(res.code, res.msg);
      // }).catch((error) => {
      //   console.log(error)
      // });
    },
    fail: (error) => {
      console.log(error)
    }
  })
  uni.hideLoading();
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {

})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {

})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {

})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {

})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {

})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {

})

</script>

<style scoped lang="scss">
.login_box {
  position: relative;
  width: 100%;
  height: 100vh;

  .login_content {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%) translateX(-50%);

    .login_title {
      font-size: 40rpx;
      background: -webkit-linear-gradient(left, #d40625, #FF8C9A, #d6d304);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .login_enroll {
      position: relative;
      border: 1px solid #d6d304;
      background: #FF8C9A;
      width: 200rpx;
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      text-shadow: 0 0 5rpx #faf6f6;
      border-radius: 50%;
      box-shadow: 0 0 20rpx #f1b8b8;
      transition: all .2s;
      margin: 30rpx 0;
    }

    .login_enroll:hover {
      opacity: .7;
    }
  }
}





.login_logo {
  width: 210rpx;
  height: 210rpx;
  border-radius: 50%;
  margin: 70rpx;
}

.login_subheading {
  font-size: 26rpx;
  letter-spacing: 5rpx;
  color: #0a0a0a;
}

.login_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login_agreement {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23rpx;
  color: #5a5555;
}

.login_choose {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  margin: 10rpx;
  border: 1px solid #464444;
}

.agreement {
  color: rgb(243, 127, 171) !important;
}

.choose_agreement {
  border: 1px solid #FF8C9A;
  background-color: antiquewhite;
  box-shadow: 0 0 5rpx #d40625;
}



.login_enroll_but {
  position: absolute;
  width: 200rpx !important;
  height: 200rpx !important;
  top: 0;
  left: 0;
  opacity: 0;
}
</style>@/api/request